import React, { Component } from 'react'
import { Link, Route } from 'react-router-dom'
// BrowserRouter HashRouter 两种路由模式
import About from './components/About'
import Home from './components/Home'
export default class App extends Component {



	render() {
		return (
			<div>
			<div className="row">
			  <div className="col-xs-offset-2 col-xs-8">
				<div className="page-header"><h2>React Router Demo</h2></div>
			  </div>
			</div>
			<div className="row">
			  <div className="col-xs-2 col-xs-offset-2">
				<div className="list-group">
					{/* 原生a标签跳转链接 */}
				  {/* <a className="list-group-item active" href="./about.html">About</a>
				  <a className="list-group-item" href="./home.html">Home</a> */}
				  {/* react路由跳转--编辑路由链接 跳转到的组件名一般使用小写字母开头 */}
				   <Link className="list-group-item" to='/about'>About</Link>
				  <Link className="list-group-item" to='/home'>Home</Link>
				 
				</div>
			  </div>
			  <div className="col-xs-6">
				<div className="panel">
				  <div className="panel-body">
					{/* 注册路由 */}
					<Route path='/about' component={About}></Route>
					<Route path='/home' component={Home}></Route>
				  </div>
				</div>
			  </div>
			</div>
		  </div>
		)
	}
}
